import React, { PureComponent } from 'react';
import { FormattedMessage, formatMessage } from 'umi/locale';
import { Spin, Menu, Icon, Avatar } from 'antd';
import router from 'umi/router';
import SelectLang from '@/components/SelectLang';
import HeaderDropdown from '@/components/HeaderDropdown';
import styles from './index.less';

export default class GlobalHeaderRight extends PureComponent {
  
  handleMenuClick = ({ key }) => {
    const { dispatch } = this.props;
    if (key === 'userCenter') {
      router.push('/account/center');
      return;
    }
    if (key === 'triggerError') {
      router.push('/exception/trigger');
      return;
    }
    if (key === 'userinfo') {
      router.push('/account/settings/base');
      return;
    }
    if (key === 'logout') {
      dispatch({
        type: 'login/logout',
      });
    }
  };

  render() {
    const {
      userInfo,
      currentUser,
    } = this.props;
    // console.log(this.props)
    const menu = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={this.handleMenuClick}>
        <Menu.Item key="userCenter">
          <Icon type="user" />
          <FormattedMessage id="menu.account.center" defaultMessage="account center" />
        </Menu.Item>
        <Menu.Item key="userinfo">
          <Icon type="setting" />
          <FormattedMessage id="menu.account.settings" defaultMessage="account settings" />
        </Menu.Item>
        <Menu.Divider />
        <Menu.Item key="logout">
          <Icon type="logout" />
          <FormattedMessage id="menu.account.logout" defaultMessage="logout" />
        </Menu.Item>
      </Menu>
    );
    return (
      <div className={[`${styles.right}  ${styles.dark}`]}>
        {userInfo ? (
          <HeaderDropdown overlay={menu}>
            <span className={`${styles.action} ${styles.account}`}>
              <Avatar
                size="large"
                className={styles.avatar}
                src={`http://localhost:8080/image/userImage/${userInfo.prefilePicture}`}
                alt="avatar"
              />
              <span className={styles.name}>{userInfo.username}</span>
            </span>
          </HeaderDropdown>
        ):(
          <Spin size="small" style={{ marginLeft: 8, marginRight: 8 }} />
        )}
        <SelectLang className={styles.action} />
      </div>
    );
  }
}
